import styled from "styled-components";
import style,{ px2rem } from "@/assets/global-style";

export const Wrapper=styled.div`
    position: fixed;
    left: 0;
    right: 0;
    bottom: ${px2rem(10)};
    background-color: #fff;
    width:80%;
    height: ${px2rem(44)};
    border: none;
    border-radius: ${px2rem(22)};
    margin: 0 auto;
`
export const TabItem = styled.div`
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  i{
    font-size: ${px2rem(24)};
    color: ${style["font-color-normal"]};
  }
  span{
    font-size: ${px2rem(10)};
  }
`;
export const Tab = styled.div`
  height: ${px2rem(40)};
  display: flex;
  flex-direction: row;
  justify-content: center;
  a {
	width: ${px2rem(70)};
    padding: ${px2rem(10)} 0;
    font-size: ${style["font-size"]};
    color: ${style["font-color-normal"]};
    &.active {
        i{
            color: ${style["theme_color"]};
        }
      span {
		/* font-size: ${style["font-size-l"]}; */
        font-weight: 700;
        color: ${style["font-color-desc"]};
        /* border-bottom: 0.1rem solid #f1f1f1; */
      }
    }
  }
`;